<template>
  <div style="margin:10px">
    <el-amap class="amap-box" ref="map" :zoom="zoom" :center="center" :events="events" :mapStyle="mapStyle">
      <el-amap-polygon style="height: 100%;" v-for="(polygon, index) in polygons" :key="index" :vid="index" :title="polygon.measure" :ref="`polygon_${index}`" :path="polygon.path" editable="true" strokeStyle="dashed" strokeColor="#FF0000" strokeWeight="2" strokeOpacity="0.8" fillOpacity="0.3" fillColor="#1791fc" :events="polygon.events"></el-amap-polygon>
    </el-amap>
  </div>
</template>


<script>
import { AMapManager } from 'vue-amap';
export default {
  data () {
    let _this = this;
    return {
      polygons: [],
      center: [121.44167, 31.181728], //地图中心点坐标 上海
      zoom: 14, //初始化地图显示层级
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      events: {
        init: o => { },
        click: e => {
          let { lng, lat } = e.lnglat;
          if (_this.isDraw) {
            let arr = [e.lnglat.lng, e.lnglat.lat];
            _this.polygons[_this.pIdx].path.push(arr);
          }
        }
      },
    }
  },
  created () {

  }
}
</script>

<style lang="scss" scoped>
::v-deep .amap-box {
  height: 600px;
}
</style>
